<template>
	<view class="content1" :style="{ background: `url(${beijing}) left top/100% 100% no-repeat` }">
		<view >
			<!-- 轮播图 -->
			<div class="banner">
				<div class="uview-banner">
					<view class="postion">
						<u-navbar :title="titlename" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed><view slot="left"></view></u-navbar>
					</view>
				</div>
			</div>
			<view class="add_con">
				<view class="add_con_top">
					<view class="add_con_top_left" :style="{ background: `url(${acimg1}) left top/100% 100% no-repeat` }" @click="tingche">
						<text class="grid-text1">停车缴费</text>
						<text class="grid-text11">Parking</text>
						<text class="grid-text111">Payment</text>
					</view>
					<view class="add_con_right" :style="{ background: `url(${acimg2}) left top/100% 100% no-repeat` }" @click="onsports">
						<text class="grid-text1">运动场地</text>
						<text class="grid-text11">Playground</text>
						<!-- <text class="grid-text111">Booking</text> -->
					</view>
				</view>
				<view class="add_con_bottom">
					<view class="add_con_bottom_left" :style="{ background: `url(${acimg3}) left top/100% 100% no-repeat` }" @click="onpublic">
						<text class="grid-text2">公共设施</text>
						<text class="grid-text22">Public</text>
						<text class="grid-text222">Utilities</text>
					</view>
					<view class="add_con_bottom_center" :style="{ background: `url(${acimg4}) left top/100% 100% no-repeat` }" @click="onaccess">
						<text class="grid-text3">交通指引</text>
						<text class="grid-text33">Traffic</text>
						<text class="grid-text333">Guidance</text>
					</view>
					<view class="add_con_bottom_right" :style="{ background: `url(${acimg5}) left top/100% 100% no-repeat` }" @click="meidhi">
						<text class="grid-text4">美食地图</text>
						<text class="grid-text44">Food</text>
						<text class="grid-text444">Map</text>
					</view>
				</view>
			</view>
			<view class="" style="width: 100vw;height: 15vh;">
				
			</view>
		</view>
		<!-- 底部导航组件 -->
		<tabber :active="1"></tabber>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const index = require("@/api/index/index.js");
	const personal = require('@/api/personal/index.js')
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#FFFFFF',
				scene: "",
				movHeight: '205rpx', //卡片高度
				//传入的数据示例
				lastDataList: [],
				text1: [],
				address: {
					name: "",
					city: "",
					province: "",
				},
				config: {
					autoplay: true,
					interval: 1000,
					multiple: 2.58,
				},
				detail: {
					title: "",
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				// beijing:this.$https.assetsPath + "027bc836effb96f7ee11564a54d4f50383c45545.png",
				beijing:this.$https.assetsPath + "a21608121b2158a2596e2afbc56a89c5498a72f0.png",
				acimg1:this.$https.assetsPath + "d6bde743084f9c46101ce5385852877f36d3194d.png",
				acimg2:this.$https.assetsPath + "c05c35c81f780e88192de94c2de4b0ea3bb88aac.png",
				acimg3:this.$https.assetsPath + "ea90264d4777c9042ea8ceade04e9987db40f5e0.png",
				acimg4:this.$https.assetsPath + "738ac037d22b64b74759edb158a1230df396dc9c.png",
				acimg5:this.$https.assetsPath + "d5839a5746a3c5c42b62a021bca1298a09972aea.png",
				// marketLeftImage: this.$https.assetsPath + "baf8211ce23662ee4ee217cea465628a00e79d40.png",
				marketLeftImage: this.$https.assetsPath + "03483ea8127fe53b8416addbeece0775e2e22dac.png",
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				navbarItems_1: [{
					layout: "left",
					type: "text",
					text: "",
					width: 50,
					weight: "bold",
					color: "#fff",
				}, ],
				homeData: [],
				tabbar_index: 0, // 底部导航默认选中
				newsList: [],
				options: {},
				page_url: '/pages/index/index',
				Homelist: [],
				titlename:'',
				venues_id:''
			};
		},
		computed: {
			filterTab() {
				if (this.detail.hiddenTab) {
					let data = this.detail.tabList.slice(0, 4);
					data.push({
						icon: this.$https.assetsPath +
							"6bdbf4f1d1e68a2f393b2e9392d4ebf3c38d1356.png",
						name: "更多",
						id: -1,
					});
					return data;
				} else {
					return this.detail.tabList;
				}
			},
		},
		onLoad(options) {
			this.options = options
			// 二维码用户openid
			const scene = decodeURIComponent(options.scene)
			this.scene = scene
			uni.setStorageSync('codescene', scene)
			uni.setStorageSync('openidlist', options.openidlist)
			// 获取页面设置配置
			const _this = this;
			// 获取学员资料
			let params = {
				app_id: this.$https.weixinAppId,
			}
			personal.getProjectIdByAppId(params).then(result => {
				getApp().globalData.projectId = result.data.result
				getApp().globalData.sign = result.data.sign;
				let that = this;
				// 查询对应小程序的配置信息
				that.getAppletConfig();
			})
		},

		methods: {
			// 美食广场
			meidhi(){
				uni.navigateTo({
					// url:'../find_index/food_court'
					url:'/page_commodity/food_map'
				})
			},
			tingche(){
				uni.navigateTo({
					url:'/page_points/cars-info/cars_parking?venues_id=' + this.venues_id
				})
			},
			onsports(){
				uni.navigateTo({
					url:'/page_commodity/sports'
				})
			},
			onpublic(){
				uni.navigateTo({
					url:'/page_commodity/public'
				})
			},
			onaccess(){
				uni.navigateTo({
					url:'/page_commodity/access?venues_id=' + this.venues_id
				})
			},
			async getAppletConfig() {
				let that = this;
				let data = {
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
				};
				let result = await index.index(data);
				if (result.code == 1) {
					that.homeData = result.data; // 首页完整数据
					that.text1 = that.homeData.notice
					that.titlename = result.data.name; // 页头标题
					that.venues_id = result.data.venue
					uni.setStorageSync("applet_icon", result.data.applet_icon);
					uni.setStorageSync("applet_name", result.data.name);
					this.homeData.footer.forEach((item, index) => {
						if (this.page_url == item.page_url) {
							this.tabbar_index = index
						}
					})
					this.$nextTick(function() {
						this.homeData.footer[this.tabbar_index].this_icon =
							this.homeData.footer[this.tabbar_index].selected_icon;
					}); // 默认选中底部Tabbar
				}
			},
			
			base_List(baseListItem, baseListIndex) {
				if (baseListIndex == 0) {
					uni.navigateTo({
						url: '/pages_a/coupon/coupon_activity'
					})
				} else if (baseListIndex == 1) {
					uni.navigateTo({
						url: '/page_bargain/mybargain'
					})
				} else if (baseListIndex == 2) {
					uni.navigateTo({
						url: '/page_collage/mycollage'
					})
				} else if (baseListIndex == 3) {
					uni.navigateTo({
						url: '/page_luckdraw/lucky/lucky'
					})
				}
			},
			Points() {
				uni.navigateTo({
					url: '/page_points/page_points/points_mall'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/index/index.css");

	.adress {
		margin-right: 20rpx;
		font-size: 28rpx;
		white-space: nowrap;
		color: white;
	}



	// 容器
	.scrollContainer {
		width: 95%;
		height: 194rpx;
		white-space: nowrap;
		margin-top: 18rpx;
	}

	// 容器项
	.scrollitem {
		display: inline-block;
		margin-left: 30rpx;
		height: 234rpx;
	}

	.scrollimage {
		width: 270rpx;
		height: 154rpx;
	}

	.recommandItemText {
		width: 270rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.EmptyData {
		text-align: center;
		margin-top: 50rpx;
	}

	.team {
		position: relative;
	}

	.section_8 {
		padding: 30rpx 20rpx 25rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 8.9rpx 1.1rpx rgba(0, 0, 0, 0.06);
		border-radius: 10rpx;
		height: 187rpx;
		width: 327rpx;
		position: relative;
	}

	.image_1 {
		width: 80rpx;
		height: 80rpx;
	}

	.image_3 {
		width: 20rpx;
		height: 20rpx;
	}

	.image_5 {
		width: 21rpx;
		height: 20rpx;
	}

	.text_25 {
		margin-left: 2rpx;
		margin-top: 17rpx;
		align-self: flex-start;
		color: rgb(190, 190, 190);
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
	}

	.group_12 {
		margin-right: 69rpx;
		align-self: center;
		float: right;
	}

	.group_14 {
		margin-top: 1rpx;
	}

	.text_22 {
		margin-bottom: 2rpx;
		color: rgb(51, 51, 51);
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.text-wrapper {
		margin-left: 10rpx;
	}

	.image_6 {
		margin-left: 8rpx;
	}

	.image_8 {
		margin-left: 7rpx;
	}

	.image_10 {
		margin-left: 8rpx;
	}

	.image_12 {
		margin-left: 7rpx;
	}

	.bblue {
		background-color: deepskyblue;
	}

	.ppink {
		background-color: rgb(239, 100, 132);
	}

	.view_9 {
		padding: 11rpx 0 1rpx;
		color: rgb(255, 255, 255);
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 10rpx;

		border-radius: 5rpx;
		width: 29rpx;
		height: 37rpx;
		float: right;
	}

	/* 去除滚动条 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.section_9 {
		margin-left: 20rpx;
		padding: 57rpx 0;
		color: rgb(51, 51, 51);
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 21rpx;
		background-color: rgb(255, 255, 255);
		/* box-shadow: 0px 0px 8.9rpx 1.1rpx rgba(0, 0, 0, 0.06); */
		border-radius: 10rpx;
		width: 60rpx;
		height: 100%;
		position: absolute; //父元素的position位置固定，这个绝
	}
</style>